<%@ page pageEncoding="utf-8"%>
<div id="_variableBox" style="width:196px;position:absolute;display:none;">
<table style="height:195px" class="detailTable" cellspacing="0" cellpadding="0">
  <tr>
    <th style="padding:0" height="24" align="center">类别:
      <select name="_variableType" id="_variableType" style="width:140px" onchange="changeVariableType()">
      </select>
	</th>
  </tr>
  <tr>
    <th style="padding:0" height="140" align="center" valign="top" ondblclick="selectVariable()">
      <select name="_variableCode" size="12" id="_variableCode" style="width:200px;height:205px;">
      </select>
	</th>
  </tr>
  <tr>
    <th style="padding:0;text-align:center;" align="center">
      <input type="button" name="button" id="button" value="确定" onclick="selectVariable()" />&nbsp;&nbsp;
      <input type="button" name="button2" id="button2" value="关闭" onclick="closeVariableBox()" />
	</th>
  </tr>
</table>
</div>
<input type="hidden" id="boxVarType" name="boxVarType" value="" />
<input type="hidden" id="varTargetId" name="varTargetId" value="" />
<script language="javascript">
var targetInputId = null;
function showVariableBox(inputAreaId,boxVarType){
	targetInputId = inputAreaId;
	ele("varTargetId").value = inputAreaId;
	if (boxVarType){
		ele('boxVarType').value = boxVarType;	
	}else{
		ele('boxVarType').value = 'full';
	}
	var textBox = ele(targetInputId);  
	if (textBox.tagName=='INPUT'){
		savePos(ele(targetInputId));
	}	
	postRequest('form1',{actionType:'showVariableBox',onComplete:function(rspText){
		var texts = rspText.split("!!--!!");
		if (texts.length == 2){
			var variableTypeContent = texts[0];
			var variableCodeContent = texts[1];
			$('#_variableType').html(variableTypeContent);
			$('#_variableCode').html(variableCodeContent);
			
			computePostion('_variableBox');
			$('#_variableBox').show();
		}
	}})
}
function changeVariableType(){
	postRequest('form1',{actionType:'changeVariableType',onComplete:function(rspText){
		$('#_variableCode').html(rspText);
	}})
}
function selectVariable(){
	if (ele('_variableCode').selectedIndex == -1){
		alert('请选中变量！');
	};
	postRequest('form1',{actionType:'selectVariable',onComplete:function(rspText){
		add(targetInputId,rspText);
		closeVariableBox();
	}})	
}
function closeVariableBox(){
	$('#_variableBox').hide();
}
function computePostion(boxId){
	var clientWidth = document.body.clientWidth;
	var tempClientHeight = $(document.body).height();
	var	clientHeight = document.body.scrollHeight;
	
	var left = $("#"+targetInputId).offset().left;
	var top = $("#"+targetInputId).offset().top;
	var width = $("#"+targetInputId).width();
	
	var boxWidth = $("#"+boxId).width();
	var boxHeight = $("#"+boxId).height();
	var targetLeft = left + width/2;
	targetLeft = targetLeft- boxWidth/2; 
	
	if ((targetLeft + boxWidth) >= clientWidth){
		targetLeft = clientWidth - boxWidth-2;
	}
	else if (targetLeft < 0){
		targetLeft = 1;
	}		
	
	var targetTop = top - 30;
	if ((targetTop + boxHeight) >= clientHeight){
		targetTop = clientHeight - boxHeight-2;
	}
	if (targetTop < 0){
		targetTop = 1;
	}
	
	$("#"+boxId).css({top:targetTop,left:targetLeft});
}
 
var curCursorPos =0;
var start=0;  
var end=0;
function add(targetInputId,fillValue){	
	var textBox = ele(targetInputId);  
	if (textBox.tagName=='INPUT'){
		var pre = textBox.value.substr(0, curCursorPos);
		var length = textBox.value.length;
		var post = textBox.value.substr(curCursorPos,length);  
		textBox.value = pre + fillValue + post;  
	}else{
        var pre = textBox.value.substr(0, start);  
        var post = textBox.value.substr(end);  
        textBox.value = pre + fillValue + post; 	
	}	
}  
function getCaret(textbox) {
	var control = document.activeElement;  
	textbox.focus();  
	var rang = document.selection.createRange();  
	rang.setEndPoint("StartToStart",textbox.createTextRange())  
	control.focus();  
	return rang.text.length;
}  
function getCaretForTextArea(textareaId){
	 var txb = document.getElementById(textareaId);
	 var pos = 0;
	 txb.focus();
	 var s = txb.scrollTop;
	 var r = document.selection.createRange();
	 var t = txb.createTextRange();
	 t.collapse(true);
	 t.select();
	 var j = document.selection.createRange();
	 r.setEndPoint("StartToStart",j);
	 var str = r.text;
	 var re = new RegExp("[\\n]","g");  
	 str = str.replace(re,"");
	 pos = str.length;
	 r.collapse(false);  
	 r.select();
	 txb.scrollTop = s;
	 return pos; 
}  
function savePos(textBox){
	if (textBox.tagName=='INPUT'){
		curCursorPos　= getCaret(textBox);
	}else{
		//var textareaId = textBox.id;
		//curCursorPos = getCaretForTextArea(textareaId);

		//如果是Firefox(1.5)的话，方法很简单  
		if(typeof(textBox.selectionStart) == "number"){  
			start = textBox.selectionStart;  
			end = textBox.selectionEnd;  
		}  
		//下面是IE(6.0)的方法，麻烦得很，还要计算上'\n'  
		else if(document.selection){  
			var range = document.selection.createRange();  
			if(range.parentElement().id == textBox.id){  
				// create a selection of the whole textarea  
				var range_all = document.body.createTextRange();  
				range_all.moveToElementText(textBox);  
				//两个range，一个是已经选择的text(range)，一个是整个textarea(range_all)  
				//range_all.compareEndPoints() 比较两个端点，如果range_all比range更往左(further to the left)，则                //返回小于 0的值，则range_all往右移一点，直到两个range的start相同。  
				// calculate selection start point by moving beginning of range_all to beginning of range  
				for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)  
					range_all.moveStart('character', 1);  
				// get number of line breaks from textarea start to selection start and add them to start  
				// 计算一下\n  
				for (var i = 0; i <= start; i ++){  
					if (textBox.value.charAt(i) == '\n')  
						start++;  
				}  
				// create a selection of the whole textarea  
				 var range_all = document.body.createTextRange();  
				 range_all.moveToElementText(textBox);  
				 // calculate selection end point by moving beginning of range_all to end of range  
				 for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)  
					 range_all.moveStart('character', 1);  
					 // get number of line breaks from textarea start to selection end and add them to end  
					 for (var i = 0; i <= end; i ++){  
						 if (textBox.value.charAt(i) == '\n')  
							 end ++;  
					 }  
				}  
			}		
	}
}  
</script>